<template>
    <div id="eform">
        <a-form  :form="form" >
            <template v-for="(value,index) in formData">
                <a-form-item
                    v-if="!value.isVisible"
                    :label="value.label"
                    :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 15 }"
                    :key="index"
                    :hasFeedback='hasFeedback'
                    >
                    <slot v-if="value.scopedSlots" :name='value.scopedSlots.customRender'></slot>
                    <a-input
                        v-else
                        :disabled='value.disabled?true:false'
                        :type="value.type"
                        v-decorator="[
                        value.prop,
                        {rules: value.rules}
                        ]"
                        :placeholder="value.placeholder"
                    />
                </a-form-item>
            </template>
    </a-form>
    </div>
</template>
<script>
export default {
    name:"eform",
    props: {'fields':Object,
            'formData':Array,
            'hasFeedback':{
                type:Boolean,
                default:true},
    },
    watch:{
        formData: {
            handler () {
                this.init()
            },
            deep: true
        },
    },
    created () {
        this.init()
        
    },
    methods:{
        init(){
            this.form = this.$form.createForm(this, {
                mapPropsToFields: () => {
                    let filedsDealed={}
                    for(let key in this.fields){
                        filedsDealed[key]=this.$form.createFormField({
                            value: this.fields[key],
                        })
                    }
                    return filedsDealed
                },
                onValuesChange:(_, values)=>{
                    this.$emit('change', values);
                },
            });
        },
    }
}
</script>
<style>
.ant-form-item-children{
    display: block;
}
#eform .ant-col-6{
    width:20%;
}
</style>


